<template>
  <el-card class="box-card">
    <div class="text item">
      <el-row type="flex" align="top">
        <el-col :span="24">
          <div class="grid-content bg-purple">
            <div>
              <h2 class="text-center">商品管理</h2>
              <MyTable :data="goodslist">
                <template #thead>
                  <th>#</th>
                  <th>商品名称</th>
                  <th>价格</th>
                  <th>标签</th>
                  <th>操作</th>
                </template>

                <template #tbody="{ row, index }">
                  <td>{{ index + 1 }}</td>
                  <td>{{ row.goods_name }}</td>
                  <td>￥{{ row.goods_price }}</td>
                  <td>
                    <input type="text" class="form-control form-control-sm form-ipt" v-if="row.inputVisible" v-focus
                      v-model.trim="row.inputValue" @blur="onInputConfirm(row)">
                    <button class="btn btn-primary btn-sm" v-else @click="row.inputVisible = true">+</button>
                    <span class="badge badge-warning ml-2" v-for="item in row.tags" :key="item">{{ item }}</span>
                  </td>
                  <td>
                    <button class="btn btn-danger btn-sm" @click="onremove(row.id)">删除</button>
                  </td>
                </template>
              </MyTable>
              <div class="form-contro">
                <span>共 1 页</span>
                <el-pagination background layout="prev, pager, next" :total="1" style="display:inline-block">
                </el-pagination>
              </div>
            </div>
          </div>
        </el-col>

      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">
            <el-carousel indicator-position="outside" interval="3000" height="400px">
              <el-carousel-item v-for="item in inbox" :key="item.id">
                <img :src="item.idVimen" alt="">
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>





</template>

<script>
import MyTable from "./my-table.vue"
export default {
  name: 'MyGoods',
  data() {
    return {
      goodslist: [],
      inbox: [
        { id: 1, idVimen: require('../../assets/2.jpg') },
        { id: 2, idVimen: require('../../assets/3.jpg') },
        { id: 3, idVimen: require('../../assets/4.jpg') },
        { id: 4, idVimen: require('../../assets/5.jpg') }

      ],
      // 图片父容器高度
      zmdHeight: 700,
      // 浏览器宽度
      screenWidth: 0
    }
  },
  created() {
    //发起请求
    this.getGoodsList()
  },
  directives: {
    focus(el) {
      el.focus()
    }
  },
  methods: {
    async getGoodsList() {
      const { data: res } = await this.$http.get('/api/goods')
      if (res.status !== 0) return console.log('获取失败');
      this.goodslist = res.data
      // console.log(this.goodslist);
    },
    onremove(id) {
      this.goodslist = this.goodslist.filter(x => x.id !== id)
    },
    onInputConfirm(row) {
      const val = row.inputValue
      row.inputValue = ''
      row.inputVisible = false

      if (!val || row.tags.indexOf(val) !== -1) return
      row.tags.push(val)
    },
    setSize: function () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
  },
  mounted() {
    // 首次加载时,需要调用一次
    this.screenWidth = window.innerWidth;
    this.setSize();
    // 窗口大小发生改变时,调用一次
    window.onresize = () => {
      this.screenWidth = window.innerWidth;
      this.setSize();
    }
  },
  components: {
    MyTable
  }
}
</script>

<style lang="less" scoped>


.form-ipt {
  width: 80px;
  display: inline-block;

}
.form-contro {
  width: 100%;
  text-align: right;
  padding-right: 20px;
}
    .el-row {
      margin-bottom: 20px;
  
      &:last-child {
        margin-bottom: 0;
      }
    }
  
    .el-col {
      border-radius: 4px;
    }
  
    .bg-purple-dark {
      background: #fff;
    }
  
    .bg-purple {
      background: #d3dce6;
    }
  
    .bg-purple-light {
      background: #e5e9f2;
    }
  
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
  
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
    .el-carousel__item h3 {
              color: #475669;
              font-size: 18px;
              opacity: 0.75;
              line-height: 300px;
              margin: 0;
            }
      
    .el-carousel__item:nth-child(2n) {
              background-color: #99a9bf;
            }
      
    .el-carousel__item:nth-child(2n+1) {
              background-color: #d3dce6;
            }
        img {
          /*设置图片宽度和浏览器宽度一致*/
          width: 100%;
          height: inherit;
        }
    .text {
      font-size: 14px;
      width: 1580px;
    }
  
    .item {
      padding: 18px 0;
      
    }
  
    .box-card {
      width: 100%;
    }
</style>